Electronic clipboard module allows us to read and manipulate the contents of the system's clipboard,
so not copying and pasting directly, but the content of such actions.
All in all, a very simple module I'll be working in line inside of indexed on email again, require
the clipboard module with the standard structured assignment clipboard requiring from electron.
Then the absolute most basic function of this module being reading the content of the system, clipboard,
a log that out, calling clipboard, dot read text.
Save my clipboard being empty at the moment, so I'll bring over a text editor from which to copy,
say some text from my text editor, select all of this and copy.
This copy text now being stored in the systems clipboard, which we can read from our app and log out,
reload the app, and there we get the exact text logged out from the system clipboard.
So this might be useful for a number of reasons.
The most obvious being some form of clipboard history app, seeing as the system clipboard gets overwritten
with each new copy.
Having access to the clipboard, however, means we can also change its contents.
For example, let's see how to transform the existing clipboard content to all uppercase.
I'll add a button for this breaking to a new line.
First, assign a click and low worth on click calling.
Make Upir and label this button.
Make clipboard uppercase.
Create the make up a function.
We don't need this log anymore.
Const make upir equals a function.
Then step one in this function is to read the content of the clipboard assigned to c.B text as before
clipboard dot read text then to write back to the clipboard which will of course overwrite the existing
Laport value say clipboard dot write text passing in the transformed content c.b text to uppercase.
Save this.
Reload the app, I'll copy the same text from my text editor again, meaning this is now the content
of the system clipboard so transform into uppercase, pasted back into the editor, and we get that
new value from the system clipboard as we updated it in our app.
So that's basic reading and writing of plain text content.
But the clipboard module also allows us to work with different data formats.
For example, in the docs we see those text methods, read text and write text and additional methods
for HTML or imagist.
I'll demonstrate with an image as HDMI is pretty similar to text move this click handler function out
the way a bit adding a new button.
I'll just duplicate this one again on its own line, this one calling show image.
Show clipboard image.
Then to be able to read and show an image from the system, Clipboard will also need an image tag leaving
the source empty so we can set it with an ID to select this tag with CB image or clipboard image at
the buttons.
Click function, contact show image equals a function with that click event object in which we can read
an image from the clipboard assigning to image.
Clipboard, dot, read image, as with any image data inside of an electron app read image will return
a native image instance for us to use.
So select that image tag document doget element by I.D. CB image setting its source attribute to the
data URL of the native image returned by the clipboard image.
This native image instance to data.
You are all safe this.
I'll use Slashdot PNG from the project again.
Bring that into view.
Copy the image, this image now being the content of the system, clipboard, refresh the app to get
that new button click and we get that copied image displayed in our app, this module being shared.
We can, of course, use any of these methods directly from the main process as well.
I'll open mind games, require the clipboard module from electron and as a very simple demonstration
right to the system clipboard as soon as the app is ready.
So create a window clipboard dot right text allow from the main process.
This will of course happen before the main window is actually created.
So immediately and indexed on HTML.
We can access that value on the clipboard logging out as before.
Clipboard dot read text.
Save both files.
And as soon as the app is relaunched, we see that clipboard value logged in the console while still
being available to the rest of the system as the current content of the clipboard based in this text
edit window and the same text.
So an extremely simple module allowing us to integrate our apps with native aspects of the operating
system.